<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动-跑步</title>
</head>

<body class="df fdc">
    <ul class="df header">
        <li class="sport-run on">跑步</li>
        <li class="sport-ride">骑行</li>
        <li class="sport-course">课堂训练</li>
    </ul>
    <main class="flex df fdc">

        <!-- 积累跑 -->
        <div class="runRange df fdc">
            <h4 class="fs16 fwn">目前累积跑步距离</h4>
            <p><span>000000</span>公里</p>
        </div>
        <!-- 地图 -->
        <div class="map pr">
            <ul class="runlist pa df">
                <li class="on">户外跑</li>
                <li>燃脂跑</li>
                <li>跑步机</li>
            </ul>
            <div class="go pa">
                <span class="fwb">GO</span>
            </div>
            <div class="map-down pa df aic">
                <span class="iconfont icon-shezhi"></span>
                <button class="target">设置目标 &gt;</button>
                <span class="iconfont icon-yinle"></span>
            </div>
        </div>
        <!-- 跑步路线 -->
        <div class="runRoad df">
            <div>
                <h4 class="fs18 fwn">跑步路线</h4>
                <p class="fs14">使用跑步路线，邂逅附近的同行者</p>
            </div>
            <span class="df jcc aic">&gt;</span>
        </div>

    </main>
</body>

</html>